<template>
	<div class="cardBody">
		<el-card class="box-card" v-for="(item,index) in PostsData" :key="index">
			<!-- 帖子头部部分 -->
			<div class="Postheader">
				<el-tag style="position:relative;top:-20px;right: 16px;margin-right: 20px;" v-if="item.status===1"
					type="success">审核通过</el-tag>
				<el-tag style="position:relative;top:-20px;right: 16px;margin-right: 20px;" v-if="item.status===0"
					type="danger">等待审核中</el-tag>
				<div style="display: flex;">
					<el-avatar :size="50">
						<img <img :src="$store.state.imgShowRoad2 + '/file/' + item.avatar" />
					</el-avatar>
					<div class="userInfo">
						<a href="javascript:;" class="userNick">
							<span>{{item.nickName}}</span>
						</a>
						<a href="javascript:;" @click="skipPostDetail(item.postId)" class="dateInfo">
							<span>{{item.createTime}}</span>
						</a>
					</div>
				</div>
				<div @click="skipPostDetail(item.postId)" style="width: 66%; padding-left: 25px;cursor: pointer;">
				</div>
				<el-dropdown trigger="click" placement="bottom-end">
					<i class="el-icon-more" style="transform: rotate(90deg);"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item @click.native="EditMyPost(index,item)">编辑</el-dropdown-item>
						<el-dropdown-item @click.native="DelMyPost(item.postId)">删除</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<!-- 帖子中间内容部分 -->
			<!-- @click="skipPostDetail(item.postId)" -->
			<div class="postContent" style="margin-left: 60px;">
				<h2 @click="skipPostDetail(item.postId)" style="cursor: pointer;">{{item.postName}}</h2>
				<div class="w-e-text" style="padding: 0;cursor: pointer;" @click="skipPostDetail(item.postId)">
					<div v-html="item.postContent.substring(0, 50)"></div>
				</div>
				<div class="postCover">
					<video
						v-if="item.contentCover.substring(item.contentCover.length -3 ) == 'mp4'"
						:src="$store.state.imgShowRoad2 + '/file/' + item.contentCover" controls />
					<el-image v-else v-for="(image, imgIndex) in item.contentCover.split(',')" :key="imgIndex"
						:src="$store.state.imgShowRoad2 + '/file/' + image" class="avatar"
						:preview-src-list="previewSrcList[index]"></el-image>
				</div>
			</div>
			<!-- 帖子收藏评论点赞部分 -->
			<div class="postBottom">
				<div class="tendency" @click="clickCollect(item.postId,item.collectOrNot)">
					<img :src="item.collectOrNot === true ? shoucang.hover : shoucang.default" alt="收藏" />
					<span :class="{ 'hover': item.collectOrNot === true }">{{item.collectCount}}</span>
				</div>
				<div class="tendency" @mouseenter="togMouseenter('comment',index)"
					@mouseleave="togMouseleave('comment',index)" @click="skipPostDetail(item.postId)">
					<img :src="currentCommentState === index ? pinglun.hover : pinglun.default" alt="评论" />
					<span :class="{ 'hover': currentCommentState === index }">{{item.commentNumBer}}</span>
				</div>
				<div class="tendency" @click="clickGiveLike(item.postId,item.linked)">
					<img :src="item.linked === true ? dainzan.hover : dainzan.default" alt="点赞" />
					<span :class="{ 'hover': item.linked === true }">{{item.likeCount}}</span>
				</div>
			</div>
		</el-card>
		<EditMyPosts ref="editMyPost" @getMyIssuePost="getMyIssuePost"></EditMyPosts>
	</div>
</template>

<script>
	import EditMyPosts from "../../components/foreground/EditMyPosts.vue"
	import postApi from "@/api/posts"
	import comment from "@/api/comment";
	export default {
		props: {
			PostsData: []
		},
		components: {
			EditMyPosts
		},
		data() {
			return {
				shoucang: {
					default: require('../../assets/images/shoucang.png'),
					hover: require('../../assets/images/shoucang2.png')
				},
				pinglun: {
					default: require('../../assets/images/pinglun.png'),
					hover: require('../../assets/images/pinglun2.png')
				},
				dainzan: {
					default: require('../../assets/images/dianzan.png'),
					hover: require('../../assets/images/dianzan2.png')
				},
				currentCollectionState: false,
				currentCommentState: false,
				currentLikeState: false,
				clicking: false, //是否被点击
			}
		},
		computed: {
			previewSrcList() {
				// 将每个帖子的 contentCover 属性转换为数组
				return this.PostsData.map(post => {
					// 如果 contentCover 存在且是字符串类型，则将其按逗号分割成数组
					if (post.contentCover && typeof post.contentCover === 'string') {
						return post.contentCover.split(',').map((image, index) => this.$store.state.imgShowRoad2 +
							'/file/' + image.trim());
					}
					// 否则返回空数组
					return [];
				});
			}
		},
		methods: {	
			async DelMyPost(PostId){
				console.log('PostId==',PostId)
				const res = await postApi.DeletePost("znExchangePost/delMyPost/"+PostId);
				if(res.code == 200){
					this.$message.success(res.msg);
					this.$parent.getMyIssuePost();
				}else{
					this.$message.error(res.msg);
				}
			},
			async clickGiveLike(PostId, linked) {
				let postLikeBean = {
					postId: PostId,
					likeStatus: linked === false ? 1 : 0
				}
				if (this.$store.getters.gettoken == null) {
					this.$message.error('您还未登录！');
				} else if (linked == false) {
					const res = await postApi.postLiked("/znPostLike/postLike", postLikeBean)
					if (res.code == 200) {
						this.$message.success(res.msg);
						this.$parent.getMyIssuePost();
					} else {
						this.$message.error(res.msg);
					}
				} else {
					const res = await postApi.postLiked("/znPostLike/postLike", postLikeBean)
					if (res.code == 200) {
						this.$message.warning("取消点赞");
						this.$parent.getMyIssuePost();
					} else {
						this.$message.error(res.msg);
					}
				}
			},
			async clickCollect(PostId, collectOrNot) {
				let postColectBean = {
					postId: PostId,
					collectStatus: collectOrNot === false ? 1 : 0
				}
				if (this.$store.getters.gettoken == null) {
					this.$message.error('您还未登录！');
				} else if (collectOrNot == false) {
					const res = await postApi.postCollect("/ZnCollectPost/postCollect", postColectBean)
					if (res.code == 200) {
						this.$message.success(res.msg);
						this.$parent.getMyIssuePost();
					} else {
						this.$message.error(res.msg);
					}
				} else {
					const res = await postApi.postLiked("/ZnCollectPost/postCollect", postColectBean)
					if (res.code == 200) {
						this.$message.warning("取消收藏");
						this.$parent.getMyIssuePost();
					} else {
						this.$message.error(res.msg);
					}
				}
			},
			EditMyPost(index,item){
				console.log("111")
				console.log(item)
				this.$refs.editMyPost.dialogFormVisible = true;
				this.$refs.editMyPost.form = JSON.parse(JSON.stringify(item));
				this.$refs.editMyPost.createE();
			},
			togMouseenter(type, index) {
				switch (type) {
					case 'collection':
						this.currentCollectionState = index;
						break;
					case 'comment':
						this.currentCommentState = index;
						break;
					case 'like':
						this.currentLikeState = index;
						break;
					default:
						break;
				}
			},
			togMouseleave(type, index) {
				switch (type) {
					case 'collection':
						this.currentCollectionState = false;
						break;
					case 'comment':
						this.currentCommentState = false;
						break;
					case 'like':
						this.currentLikeState = false;
						break;
					default:
						break;
				}
			},
			skipPostDetail(item) {
				this.$router.push({
					path: `/PostDetailPage/${item}`
				}).catch(err => err);
			},
			getMyIssuePost() {
			      this.$emit('getMyIssuePost'); // 将事件向上传递给父组件
			}
		},
		watch: {

		},
		created() {

		}
	}
</script>

<style lang="scss" scoped>
	.box-card {
		margin-top: 10px;

		.Postheader {
			display: flex;
			justify-content: space-between;
			.userInfo {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				margin-left: 10px;

				.userNick {
					color: inherit;
					text-decoration: none;
				}

				.userNick:hover {
					color: #ff8200;
					cursor: pointer;
				}

				.dateInfo {
					margin-bottom: 1px;
					color: #939393;
					font-size: 13px;
					line-height: 16px;
					text-decoration: none;
				}

				.dateInfo:hover {
					color: #ff8200;
					cursor: pointer;
				}
			}
			.el-dropdown{
				height: 20px;
			}
		}

		.postContent {
			.postCover {
				display: flex;

				.el-image {
					margin-left: 10px;
					height: 240px;
					
				}
				video{
					margin-left: 10px;
					max-width: 100%;
					/* 设置图片最大宽度为父元素宽度的100% */
					max-height: 100%;
					/* 设置图片最大高度为父元素高度的100% */
					height: auto;
					/* 让图片高度自适应以保持比例 */
				}
			}
		}

		.postBottom {
			display: flex;
			justify-content: space-around;
			margin-top: 12px;

			.tendency {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				cursor: pointer;

				span {
					font-size: 16px;
					color: #939393;
					margin-left: 5px;
				}

				img {

					max-width: 32%;
				}

				.hover {

					color: #ff8200;
				}
			}
		}
	}
</style>